<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.9.0">
    <meta charset="utf-8">
    
    
    <title>Liuqh&#39;blogs | 要有最朴素的生活  最遥远的梦想，即使明日天寒地冻 路远马亡。</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <meta name="keywords" content>
    <link rel="shortcut icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.2/dist/jquery.fancybox.min.css">
    <link rel="stylesheet" href="/css/style.css?v=1.4.3">
    
    <script type="text/javascript">
        // Data Center
        var DC = {
            reward:	false,
            lv: JSON.parse('{"enable":false,"app_id":null,"app_key":null,"icon":true}'),
            v: JSON.parse('{"enable":false,"appid":null,"appkey":null,"notify":true,"verify":true,"placeholder":"give me some sugers plz...","avatar":"wavatar"}'),
            g: JSON.parse('{"enable":false,"lazy":false,"owner":"liuqinghua0609","repo":"gitment","oauth":{"client_id":null,"client_secret":null},"perPage":10}'),
            d: JSON.parse('{"app_id":null}')
        };
    </script>
    <script type="text/javascript">
        window.lazyScripts=[];
    </script>
    
</head>


<body>
    <div id="loading" class="active"></div>

    <aside id="menu" class="">
  <div class="inner flex-row-vertical">
    <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menu-off">
        <i class="icon icon-lg icon-close"></i>
    </a>
    <div class="brand-wrap">
      
      <img src="/img/111.jpg" class="brand-bg">
      
      <div class="brand">
        <a href="/" class="avatar waves-effect waves-circle waves-light">
          <img src="/img/avatar.jpg">
        </a>
        <hgroup class="introduce">
          <h5 class="nickname">Liuqh</h5>
          <a href="mailto:心随远方 无畏无惧" title="心随远方 无畏无惧" class="mail">
            
              <span>心</span>
            
              <span>随</span>
            
              <span>远</span>
            
              <span>方</span>
            
              <span> </span>
            
              <span>无</span>
            
              <span>畏</span>
            
              <span>无</span>
            
              <span>惧</span>
            
          </a>
        </hgroup>
        
        <ul class="menu-link">
          
              <li>
                <a href="https://blog.csdn.net/qq_41840644" target="_blank">
                  <i class="icon icon-lg icon-heart"></i>
                </a>
              </li>
            
              <li>
                <a href="https://weibo.com/5902408774/profile?rightmod=1&amp;wvr=6&amp;mod=personnumber&amp;is_all=1" target="_blank">
                  <i class="icon icon-lg icon-weibo"></i>
                </a>
              </li>
            
        </ul>
        
      </div>
    </div>
    <div class="scroll-wrap flex-col">
      <ul class="nav">
        
            <li class=" active">
              <a href="/"  >
                <i class="icon icon-lg icon-home"></i>
                首页
              </a>
            </li>
        
            <li class="">
              <a href="/categories"  >
                <i class="icon icon-lg icon-th-list"></i>
                分类
              </a>
            </li>
        
            <li class="">
              <a href="/tags"  >
                <i class="icon icon-lg icon-tags"></i>
                标签
              </a>
            </li>
        
            <li class="">
              <a href="/custom"  >
                <i class="icon icon-lg icon-music"></i>
                随身听
              </a>
            </li>
        
            <li class="">
              <a href="/about"  >
                <i class="icon icon-lg icon-user"></i>
                我
              </a>
            </li>
        
      </ul>
    </div>
  </div>
</aside>

    <main id="main">
        
    <header class="top-header" id="header">
    <div class="flex-row clearfix">
        <a href="javascript:;" class="header-icon pull-left waves-effect waves-circle waves-light on" id="menu-toggle">
          <i class="icon icon-lg icon-navicon"></i>
        </a>
        <div class="flex-col header-title ellipsis">
            <span>Liuqh&#39;blogs</span>
            
            <span> - </span>
            <span class="header-description">要有最朴素的生活  最遥远的梦想，即使明日天寒地冻 路远马亡。</span>
            
        </div>
        
        <a href="javascript:;" id="site_search_btn" class="header-icon pull-right waves-effect waves-circle waves-light">
            <i class="icon icon-lg icon-search"></i>
        </a>
        
    </div>
</header>
<header class="content-header index-header">
    <img src="/img/banner1.jpg" class="header-bg">
    <div class="container fade-scale">
        <h1 class="title">Liuqh&#39;blogs</h1>
        <h5 class="subtitle">
            
                要有最朴素的生活  最遥远的梦想，即使明日天寒地冻 路远马亡。
            
        </h5>
        
    </div>
    

</header>

<div id="site_search">
    <div class="search-title clearfix">
        <span class="pull-left">
          <i class="icon icon-lg icon-search"></i>
        </span>
        <input type="text" id="local-search-input" name="q" results="0" placeholder="search my blog..." class="form-control pull-left"/>
        <a href="javascript:;" class="close pull-right waves-effect waves-circle waves-light">
          <i class="icon icon-lg icon-close"></i>
        </a>
    </div>
    <div id="local-search-result"></div>
</div>

    <div class="container body-wrap">
        <ul class="post-list">
        
            <li class="post-list-item fade">
                <article id="post-JavaScript运动函数封装"
  class="article-card article-type-post" itemprop="blogPost">
  
        
<div class="item-thumb">
    <a class="thumb-link" href="/2019/07/26/JavaScript运动函数封装/"></a>
    <div class="thumb-hover">
        <span class="icon icon-eye"></span>
    </div>
    <img src="/img/thumb/8.jpg" alt="图片路径不正确">
    


  
    <h3 class="post-title ab-title" itemprop="name">
      <a class="post-title-link" href="/2019/07/26/JavaScript运动函数封装/">JavaScript运动函数封装</a>
    </h3>
  



</div>

        
    
    
    
    <div class="post-meta">
        <time class="post-time" title="2019-07-26 20:02:29" datetime="2019-07-26T12:02:29.000Z"  itemprop="datePublished">2019-07-26</time>

        
	<ul class="article-category-list"><li class="article-category-list-item"><a class="article-category-list-link" href="/categories/JavaScript学习笔记/">JavaScript学习笔记</a></li></ul>



        

        


        
        
    </div>
    
    <div class="post-content" id="post-content" itemprop="postContent">
    
    
        一、JavaScript运动函数封装
常用参数声明：

dom（object） : dom元素，通过document.getElementsByTagName等操作获取到的元素
target （number） : 运动的目标数值
speed （number）：匀速运动的速度


arr （string）：需要修改的属性名
parmobj （object）：需要修改的参数对象列表


1.匀速...
    
    <a href="/2019/07/26/JavaScript运动函数封装/" class="post-more waves-effect waves-button">
        more
    </a>
    </div>
</article>

<div class="post-footer">
    
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/运动函数/">运动函数</a></li></ul>

</div>


            </li>
        
            <li class="post-list-item fade">
                <article id="post-立即执行函数"
  class="article-card article-type-post" itemprop="blogPost">
  
        
<div class="item-thumb">
    <a class="thumb-link" href="/2019/07/26/立即执行函数/"></a>
    <div class="thumb-hover">
        <span class="icon icon-eye"></span>
    </div>
    <img src="/img/thumb/7.jpg" alt="图片路径不正确">
    


  
    <h3 class="post-title ab-title" itemprop="name">
      <a class="post-title-link" href="/2019/07/26/立即执行函数/">立即执行函数</a>
    </h3>
  



</div>

        
    
    
    
    <div class="post-meta">
        <time class="post-time" title="2019-07-26 20:02:29" datetime="2019-07-26T12:02:29.000Z"  itemprop="datePublished">2019-07-26</time>

        
	<ul class="article-category-list"><li class="article-category-list-item"><a class="article-category-list-link" href="/categories/JavaScript学习笔记/">JavaScript学习笔记</a></li></ul>



        

        


        
        
    </div>
    
    <div class="post-content" id="post-content" itemprop="postContent">
    
    
        一、立即执行函数
立即执行函数（IFIE）：此类函数没有声明，在一次执行之后会立即释放。适合做初始化工作。

我们平常所见的函数执行一般都是函数名加小括号，其实我们的立即执行函数与我们平时调用执行函数时的形式是一样的，让我们来看一下我们常见的几种立即执行函数的写法：
123456789101112131415161718//第一种w3c标准推荐的写法( function()&#123; &#...
    
    <a href="/2019/07/26/立即执行函数/" class="post-more waves-effect waves-button">
        more
    </a>
    </div>
</article>

<div class="post-footer">
    
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/立即执行函数/">立即执行函数</a></li></ul>

</div>


            </li>
        
            <li class="post-list-item fade">
                <article id="post-BOM"
  class="article-card article-type-post" itemprop="blogPost">
  
        
<div class="item-thumb">
    <a class="thumb-link" href="/2019/07/26/BOM/"></a>
    <div class="thumb-hover">
        <span class="icon icon-eye"></span>
    </div>
    <img src="/img/thumb/6.jpg" alt="图片路径不正确">
    


  
    <h3 class="post-title ab-title" itemprop="name">
      <a class="post-title-link" href="/2019/07/26/BOM/">BOM</a>
    </h3>
  



</div>

        
    
    
    
    <div class="post-meta">
        <time class="post-time" title="2019-07-26 20:01:34" datetime="2019-07-26T12:01:34.000Z"  itemprop="datePublished">2019-07-26</time>

        
	<ul class="article-category-list"><li class="article-category-list-item"><a class="article-category-list-link" href="/categories/BOM/">BOM</a></li></ul>



        

        


        
        
    </div>
    
    <div class="post-content" id="post-content" itemprop="postContent">
    
    
        一、BOM对象包含的内容
BOM: Brower Object Model，简称浏览器对象模型

window   JavaScript层级中的顶级对象，表示浏览器窗口
Navigator  包含了客户端浏览器的信息
History     包含了浏览器窗口访问过的URL


Location    包含了当前URL的信息
Screen 包含了客户端显示屏的信息


二、Window对象1....
    
    <a href="/2019/07/26/BOM/" class="post-more waves-effect waves-button">
        more
    </a>
    </div>
</article>

<div class="post-footer">
    
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/BOM对象/">BOM对象</a></li></ul>

</div>


            </li>
        
            <li class="post-list-item fade">
                <article id="post-函数式编程纯函数"
  class="article-card article-type-post" itemprop="blogPost">
  
        
<div class="item-thumb">
    <a class="thumb-link" href="/2019/07/21/函数式编程纯函数/"></a>
    <div class="thumb-hover">
        <span class="icon icon-eye"></span>
    </div>
    <img src="/img/thumb/5.jpg" alt="图片路径不正确">
    


  
    <h3 class="post-title ab-title" itemprop="name">
      <a class="post-title-link" href="/2019/07/21/函数式编程纯函数/">纯函数和柯里化</a>
    </h3>
  



</div>

        
    
    
    
    <div class="post-meta">
        <time class="post-time" title="2019-07-21 15:06:57" datetime="2019-07-21T07:06:57.000Z"  itemprop="datePublished">2019-07-21</time>

        
	<ul class="article-category-list"><li class="article-category-list-item"><a class="article-category-list-link" href="/categories/你不知道的JavaScript/">你不知道的JavaScript</a></li></ul>



        

        


        
        
    </div>
    
    <div class="post-content" id="post-content" itemprop="postContent">
    
    
        一、函数式编程纯函数
纯函数：不依赖，不修改作用域以外的变量的函数（或者是相同的输入，永远得到的是相同的输出）

二、函数式编程柯里化
函数柯里化：将使用多个参数的函数转化为一系列使用一个参数的函数作用：前端使用柯里化的用途主要是简化代码结构，提高系统的维护性，一个方法只有一个参数，强制了功能的单一性，很自然就做到了功能内聚，减少代码耦合。

123456789101112131415161...
    
    <a href="/2019/07/21/函数式编程纯函数/" class="post-more waves-effect waves-button">
        more
    </a>
    </div>
</article>

<div class="post-footer">
    
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/函数式编程/">函数式编程</a></li></ul>

</div>


            </li>
        
            <li class="post-list-item fade">
                <article id="post-函数防抖和节流"
  class="article-card article-type-post" itemprop="blogPost">
  
        
<div class="item-thumb">
    <a class="thumb-link" href="/2019/07/21/函数防抖和节流/"></a>
    <div class="thumb-hover">
        <span class="icon icon-eye"></span>
    </div>
    <img src="/img/thumb/4.jpg" alt="图片路径不正确">
    


  
    <h3 class="post-title ab-title" itemprop="name">
      <a class="post-title-link" href="/2019/07/21/函数防抖和节流/">函数防抖和节流</a>
    </h3>
  



</div>

        
    
    
    
    <div class="post-meta">
        <time class="post-time" title="2019-07-21 15:06:57" datetime="2019-07-21T07:06:57.000Z"  itemprop="datePublished">2019-07-21</time>

        
	<ul class="article-category-list"><li class="article-category-list-item"><a class="article-category-list-link" href="/categories/你不知道的JavaScript/">你不知道的JavaScript</a></li></ul>



        

        


        
        
    </div>
    
    <div class="post-content" id="post-content" itemprop="postContent">
    
    
        一、函数防抖和节流
在前端开发中有一部分的用户行为会频繁的触发事件执行，而对于DOM操作、资源加载等耗费性能的处理，很可能导致页面卡顿，甚至浏览器的崩溃。函数节流（throttle）和函数防抖（debounce）就是为了解决类似需求应运而生的

节流
节流：函数节流就是预定一个函数只有在大于等于执行周期时才会执行，周期内调用不执行。好像水滴攒到一定重量才会落下一样。** 应用场景：**

窗...
    
    <a href="/2019/07/21/函数防抖和节流/" class="post-more waves-effect waves-button">
        more
    </a>
    </div>
</article>

<div class="post-footer">
    
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/防抖节流/">防抖节流</a></li></ul>

</div>


            </li>
        
            <li class="post-list-item fade">
                <article id="post-记录今天走进的思维误区"
  class="article-card article-type-post" itemprop="blogPost">
  
        
<div class="item-thumb">
    <a class="thumb-link" href="/2019/07/20/记录今天走进的思维误区/"></a>
    <div class="thumb-hover">
        <span class="icon icon-eye"></span>
    </div>
    <img src="/img/thumb/3.jpg" alt="图片路径不正确">
    


  
    <h3 class="post-title ab-title" itemprop="name">
      <a class="post-title-link" href="/2019/07/20/记录今天走进的思维误区/">this指向问题</a>
    </h3>
  



</div>

        
    
    
    
    <div class="post-meta">
        <time class="post-time" title="2019-07-20 15:08:07" datetime="2019-07-20T07:08:07.000Z"  itemprop="datePublished">2019-07-20</time>

        
	<ul class="article-category-list"><li class="article-category-list-item"><a class="article-category-list-link" href="/categories/一个萝卜一个坑/">一个萝卜一个坑</a></li></ul>



        

        


        
        
    </div>
    
    <div class="post-content" id="post-content" itemprop="postContent">
    
    
        记录今天走进的思维误区先上代码为敬：
123456789101112 var obj =&#123;	a: '1',	n: function()&#123;		console.log(this)		var f2 = function()&#123;			var num = 3;			console.log(this)		&#125;		f2()	&#125;&#125;obj.n()

首先...
    
    <a href="/2019/07/20/记录今天走进的思维误区/" class="post-more waves-effect waves-button">
        more
    </a>
    </div>
</article>

<div class="post-footer">
    
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/this/">this</a></li></ul>

</div>


            </li>
        
            <li class="post-list-item fade">
                <article id="post-对象和包装类"
  class="article-card article-type-post" itemprop="blogPost">
  
        
<div class="item-thumb">
    <a class="thumb-link" href="/2019/07/17/对象和包装类/"></a>
    <div class="thumb-hover">
        <span class="icon icon-eye"></span>
    </div>
    <img src="/img/thumb/2.jpg" alt="图片路径不正确">
    


  
    <h3 class="post-title ab-title" itemprop="name">
      <a class="post-title-link" href="/2019/07/17/对象和包装类/">对象和包装类</a>
    </h3>
  



</div>

        
    
    
    
    <div class="post-meta">
        <time class="post-time" title="2019-07-17 23:35:48" datetime="2019-07-17T15:35:48.000Z"  itemprop="datePublished">2019-07-17</time>

        
	<ul class="article-category-list"><li class="article-category-list-item"><a class="article-category-list-link" href="/categories/JavaScript学习笔记/">JavaScript学习笔记</a></li></ul>



        

        


        
        
    </div>
    
    <div class="post-content" id="post-content" itemprop="postContent">
    
    
        
                
                这是一只猫
            
一、对象
对象的定义：
字面量var obj = { }
通过构造函数：
系统自带的：new Object(); Array() ; Number() ; Boolean()
自定义function Person(){}var person = new Person();需要注意的是自定...
    
    <a href="/2019/07/17/对象和包装类/" class="post-more waves-effect waves-button">
        more
    </a>
    </div>
</article>

<div class="post-footer">
    
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/包装类/">包装类</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/对象/">对象</a></li></ul>

</div>


            </li>
        
            <li class="post-list-item fade">
                <article id="post-数组与类数组"
  class="article-card article-type-post" itemprop="blogPost">
  
        
<div class="item-thumb">
    <a class="thumb-link" href="/2019/07/17/数组与类数组/"></a>
    <div class="thumb-hover">
        <span class="icon icon-eye"></span>
    </div>
    <img src="/img/thumb/1.jpg" alt="图片路径不正确">
    


  
    <h3 class="post-title ab-title" itemprop="name">
      <a class="post-title-link" href="/2019/07/17/数组与类数组/">数组与类数组</a>
    </h3>
  



</div>

        
    
    
    
    <div class="post-meta">
        <time class="post-time" title="2019-07-17 23:31:18" datetime="2019-07-17T15:31:18.000Z"  itemprop="datePublished">2019-07-17</time>

        
	<ul class="article-category-list"><li class="article-category-list-item"><a class="article-category-list-link" href="/categories/JavaScript学习笔记/">JavaScript学习笔记</a></li></ul>



        

        


        
        
    </div>
    
    <div class="post-content" id="post-content" itemprop="postContent">
    
    
        一、数组数组的定义：

字面量var arr = [1,2,3] //常用写法
new Array（ ）new Array(10)  //一个参数的情况下表示生成了一个长度为10的数组new Array(2,3,) // [2,3]


数组的方法

改变原数组的方法


pop  
push   
shift   
unshift 
splice
reverse


sort


不改变原...
    
    <a href="/2019/07/17/数组与类数组/" class="post-more waves-effect waves-button">
        more
    </a>
    </div>
</article>

<div class="post-footer">
    
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/数组/">数组</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/类数组/">类数组</a></li></ul>

</div>


            </li>
        
        </ul>
        
    </div>

    </main>
    <footer class="footer ">
    
    <div class="bottom">
        <p>
            <span>
                Liuqh &copy; 2017 - 2019
            </span>
        		
           	
            
            
            <span>
	            Power by <a href="http://hexo.io/" target="_blank">Hexo</a> Theme <a href="https://github.com/codefine/hexo-theme-mellow" target="_blank">mellow</a>
            </span>
            
            
            

            
                
<span class="site-uv" title="总访客量">
    <i class="icon icon-user"></i>
    <i class="busuanzi-value" id="busuanzi_value_site_uv"></i>
</span>


<span class="site-pv" title="总访问量">
    <i class="icon icon-eye"></i>
    <i class="busuanzi-value" id="busuanzi_value_site_pv"></i>
</span>

            
        </p>
    </div>
</footer>

    <div class="mask" id="mask"></div>
<a href="javascript:;" id="gotop" class="waves-effect waves-circle waves-light"><span class="icon icon-lg icon-chevron-up"></span></a>



<div class="global-share" id="globalShare">
    <ul class="reset share-icons">
      
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://liuqinghua0609.gitee.io/&title=Liuqh'blogs&pic=http://liuqinghua0609.gitee.io/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://liuqinghua0609.gitee.io/&title=Liuqh'blogs&source=" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      
    </ul>
 </div>


<div class="page-modal wx-share" id="wxShare">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <img src="" alt="微信分享二维码">
</div>


    
    <!-- main-js -->
<script type="text/javascript" src="//cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/plugins/fastclick.js?v=1.4.3"></script>
<script type="text/javascript" src="/js/plugins/ios-orientationchange-fix.js?v=1.4.3"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.2/dist/jquery.fancybox.min.js"></script>

<script type="text/javascript" src="//cdn.bootcss.com/node-waves/0.7.4/waves.min.js"></script>

<script type="text/javascript" src="/js/method.js?v=1.4.3"></script>
<script type="text/javascript" src="/js/blog.js?v=1.4.3"></script>

<!-- third-party -->






<script type="text/javascript" src="/js/plugins/local_search.js?v=1.4.3"></script>
<script type="text/javascript">
	var search_path = "search.xml";
	if (search_path.length === 0) {
		search_path = "search.xml";
	}
	var path = "/" + search_path;
	searchFunc(path, "local-search-input", "local-search-result");
</script>



<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>



    
    





    <!-- mathjax config similar to math.stackexchange -->
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: {
            inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
            processEscapes: true,
            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
        }
    });
</script>

<script type="text/x-mathjax-config">
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for (i=0; i < all.length; i += 1) {
            all[i].SourceElement().parentNode.className += ' has-jax';
        }
    });
</script>

<script type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></script>







    
</body>
</html>
